<script setup lang="ts">
import { onMounted, reactive, ref, computed } from "vue";
import { tableBorder } from "@/utils/border/table-border.ts";
import { Message, PaginationProps } from "@arco-design/web-vue";
import type { newsCenterEditType } from "@/types/newsType";
import useModal from "@/hooks/useModal.ts";
import HelpCenterForm from "./helpCenterForm.vue";
import { newsHelpList, newsHelpDel } from "@/services/newsApi";
const { ModalShow, ModalHide } = useModal();

const drawer = ref<{
  showDialog: () => {};
  hideDialog: () => {};
}>();
const visible = ref(false);

const data = ref<newsCenterEditType[]>([]);

const helpform = ref<{
  show: () => void;
  edit: (data: newsCenterEditType) => void;
  getDetail: (data: newsCenterEditType) => void;
}>();

const pagination = reactive<PaginationProps>({
  total: 0,
  current: 1,
  showTotal: true,
  pageSize: 10,
});

const formSearch = reactive({
  current: 1,
  size: 10,
});

function queryData() {
  // data.value = [];
  newsHelpList(formSearch).then((res) => {
    if (res.code === 200) {
      data.value = res.data.records;
      pagination.total = res.data.total;
      pagination.current = res.data.current;
      pagination.pageSize = res.data.size;
    }

  });
}

// 添加
const handleAdd = () => {
  options.title = "添加帮助事项";
  helpform.value?.show();
};

// 修改
const handleEdit = (row: newsCenterEditType) => {
  options.title = "编辑帮助事项";
  helpform.value?.edit(row);
};

// 详情
const handleInfo = (row: newsCenterEditType) => {
  formModel.question = row.question;
  formModel.answer = row.answer;
  visible.value = true;
  options.title = "查看帮助事项";
  // helpform.value?.getDetail(row);
};

// 删除
const handleDelete = (row: newsCenterEditType) => {
  ModalShow({
    content: "您确认要删除这条信息吗？",
  }).then(() => {
    newsHelpDel(row.id).then((res) => {
      if (res.code === 200) {
        if (data.value.length === 1) {
          formSearch.current = formSearch.current - 1;
        }
        queryData();
        ModalHide();
        Message.success("删除成功");
      } else {
        ModalHide();
      }
    });
  });
};

const handlePageChange = (page: number) => {
  formSearch.current = page;
  queryData();
};

onMounted(() => {
  queryData();
});

const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: 80,
    slotName: "index",
  },
  {
    title: "问题标题",
    dataIndex: "question",
    width: 250,
  },
  {
    title: "答案",
    dataIndex: "answer",
    slotName: "answer",
  },
  {
    title: "操作",
    slotName: "operate",
    width: 160,
  },
];

const formModel = reactive({
  question: "",
  answer: "",
});

const options = reactive({
  title: "",
});
const handleCancel = () => {
  drawer.value?.hideDialog();
};
const handleClose = () => {
  visible.value = false;
};

const stripHtml = (html: string) => {
  const doc = new DOMParser().parseFromString(html, "text/html");
  return doc.body.textContent || "";
};
</script>

<template>
  <a-space
    class="container"
    direction="vertical"
  >
    <a-card>
      <div class="tabletools">
        <a-space>
          <a-button
            type="primary"
            @click="handleAdd"
          >
            <template #icon>
              <icon-plus />
            </template>
            <span>新增</span>
          </a-button>
        </a-space>
      </div>

      <a-table
        :data="data"
        :columns="columns"
        :bordered="tableBorder"
        :pagination="pagination"
        @page-change="handlePageChange"
        column-resizable="false"
      >
        <template #index="{rowIndex}">
          {{ (pagination.current - 1) * pagination.pageSize + rowIndex + 1 }}
        </template>

        <template #answer="{record}">
          <div class="text">
            <span v-text="stripHtml(record.answer)"></span>
          </div>
        </template>

        <template #operate="{ record }">
          <a-space>
            <a-button
              type="primary"
              @click="handleEdit(record)"
            >编辑</a-button>
            <a-button
              type="primary"
              status="warning"
              @click="handleInfo(record)"
            >详情</a-button>
            <a-button
              type="primary"
              status="danger"
              @click="handleDelete(record)"
            >删除</a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>
  </a-space>
  <help-center-form
    ref="helpform"
    @list="queryData"
    :title="options.title"
  />

  <a-modal
    :width="900"
    :closable="false"
    @cancel="handleCancel"
    v-model:visible="visible"
    ref="drawer"
  >
    <div>
      <div>
        问题：{{ formModel.question }} ？
      </div>
      <div style="height: 600px;overflow: hidden;">
        <div style="height: 100%;overflow: auto;">
          <p v-html="formModel.answer"></p>
        </div>
      </div>
    </div>

    <template #footer>
      <a-button @click="handleClose">
        关闭
      </a-button>
    </template>
  </a-modal>
</template>

<style scoped lang="scss">
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 1000px;
}
</style>